<template>
	<!-- 我的邀请 -->
	<view class="maInvite-main">
		<view class="maInvite-backImage">
			<image src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241216/3bd7c714e1312a33b58a25beaae6cf2c.png" style="width: 100%"></image>
		</view>
		<view class="maInvite-List">
			<view class="maInvite-item" @click="open()" v-if="vipInfo.is_vip">
				<view class="image">
					<image
						src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241216/8e375bc848608b874bb4d29e64416745.png"
						style="width: 80rpx; height: 68rpx; margin-top: 7px"
					></image>
				</view>
				<view class="title">邀请云店店主</view>
				<view class="icon">
					<image
						src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241216/1130d8af7a8e34a0c2282bec41f682b9.png"
						style="width: 80rpx; height: 80rpx"
					></image>
				</view>
			</view>
			<view class="maInvite-item" @click="open()" v-if="vipInfo.is_vip">
				<view class="image">
					<image
						src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241216/8e375bc848608b874bb4d29e64416745.png"
						style="width: 80rpx; height: 68rpx; margin-top: 7px"
					></image>
				</view>
				<view class="title">邀请云店创客</view>
				<view class="icon">
					<image
						src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241216/1130d8af7a8e34a0c2282bec41f682b9.png"
						style="width: 80rpx; height: 80rpx"
					></image>
				</view>
			</view>
			<view class="maInvite-item" @click="open()">
				<view class="image">
					<image
						src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241216/8e375bc848608b874bb4d29e64416745.png"
						style="width: 80rpx; height: 68rpx; margin-top: 7px"
					></image>
				</view>
				<view class="title">邀请云店会员</view>
				<view class="icon">
					<image
						src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241216/1130d8af7a8e34a0c2282bec41f682b9.png"
						style="width: 80rpx; height: 80rpx"
					></image>
				</view>
			</view>
		</view>

		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @click="show = false">
					<view class="images">
						<image  :src="'data:image/png;base64,' + imageUrl" mode="widthFix" style="width: 450rpx;"></image>
					</view>
				</view>
			</view>
		</u-overlay>

		<!-- <u-popup
			:show="show"
			@close="getClose"
			mode="center"
			bgColor="transparent"
			:safeAreaInsetBottom="true"
			round="20"
			:customStyle="{ margin: '0 auto', position: 'relative' }"
		>
			<view>
				<canvas :disable-scroll="true" v-if="isPosterShow" canvas-id="mycanvas" style="width: 604rpx; height: 1080rpx"></canvas>
				<view class="canvas_btn">保存到相册</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
import { commonQrcode, userUserinfo, userVip } from '../../../api/home/index.js';
export default {
	data() {
		return {
			show: false,
			userInfo: {},
			imageUrl: '',
			vipInfo: null,
			isPosterShow:false
		};
	},
	async onLoad() {
		await this.getuserUserinfo();
		await this.getuserVip();
		await this.getcommonQrcode({
			page: 'pages/loginMain/loginMain',
			scene: `id=${this.userInfo.id}`
		});
	},
	methods: {
		open() {
			this.show = true;
			// this.generatePoster();
		},

		// 生成海报
		async generatePoster() {
			uni.showLoading({
				title: '生成海报中'
			});

			let ctx = uni.createCanvasContext('mycanvas');
			uni.getImageInfo({
				src: '/static/image/dd.png',
				success: async (imageInfo) => {
					console.log(imageInfo);
					ctx.drawImage(imageInfo.path, 0, 0, 604, 1080);
					this.isPosterShow = true;
					// 将加载的弹窗隐藏
					
					uni.hideLoading();
				},
				fail:res=>{
				           console.log(`缓存失败：${res.errMsg}`);    
				    }
			});
		},

		// 获取二维码
		async getcommonQrcode(objs) {
			try {
				const resData = await commonQrcode(objs);
				this.imageUrl = resData.data.img;
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		},

		// 获取用户信息
		async getuserUserinfo() {
			try {
				const resData = await userUserinfo();
				this.userInfo = resData.data;
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		},

		// 获取会员信息
		async getuserVip() {
			try {
				const resData = await userVip();
				this.vipInfo = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		getClose() {
			this.show = false;
		}
	}
};
</script>

<style>
page {
	background-color: #1372ff;
}
</style>

<style scoped lang="scss">
.maInvite-main {
	.maInvite-List {
		box-sizing: border-box;
		padding: 30rpx;
		.maInvite-item {
			background-color: #fff;
			box-sizing: border-box;
			padding: 40rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			margin-top: 30rpx;
			color: #444;
			font-weight: bold;
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-between;
			.title {
				text-align: left;
				box-sizing: border-box;
				padding: 0px 20rpx;
				flex: 1;
			}
		}
	}
}

.canvas_btn {
	background-color: #2979ff;
	height: 40px;
	width: 120px;
	border-radius: 20rpx;
	font-size: 28rpx;
	color: #fff;
	line-height: 40px;
	text-align: center;
	margin: 0 auto;
}

.rect{
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	.images{
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 10rpx;
	}
}
</style>
